/* eslint-disable */
import { FloatingMenuPlugin } from './floating-menu-plugin'; //需要在封装一层
import { useEffect, useState } from 'react';
import { useEditorStore } from '@/store/useEditorZustand';
import { useCurrentEditor } from '@tiptap/react';

const FloatingMenu = (props) => {
  const { editor: currentEditor } = useCurrentEditor();
  const [element, setElement] = useState(null);
  useEffect(() => {
    if (!element) {
      return;
    }
    if (props.editor?.isDestroyed || currentEditor?.isDestroyed) {
      return;
    }
    const {
      pluginKey = 'floatMenu',
      editor,
      tippyOptions = {},
      updateDelay,
      shouldShow = null,
    } = props;
    const menuEditor = editor || currentEditor;

    if (!menuEditor) {
      console.warn(
        'FloatingMenu component is not rendered inside of an editor component or does not have editor prop.'
      );
      return;
    }
    const plugin = FloatingMenuPlugin({
      updateDelay,
      editor: menuEditor,
      element,
      pluginKey,
      shouldShow,
      tippyOptions,
    });
    menuEditor.registerPlugin(plugin);
    return () => {
      menuEditor.unregisterPlugin(pluginKey);
    };
  }, [props.editor, currentEditor, element]);

  return (
    <div ref={setElement} className={props.className} style={{ visibility: 'hidden' }}>
      {props.children}
    </div>
  );
};

export default FloatingMenu;
